{% extends "Sales_base.html" %}
{% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <style>
        /* 联系页面样式 */
        .contact-container {
            display: flex;
            gap: 2rem;
            padding: 2rem 5%;
            margin-top: 60px;
        }

        /* 侧边栏样式 */
        .contact-sidebar {
            width: 280px;
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            height: fit-content;
        }

        .contact-nav-item {
            padding: 1rem;
            margin: 0.5rem 0;
            cursor: pointer;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }

        .contact-nav-item:hover {
            background: #e9ecef;
            border-left-color: #2c7a47;
        }

        .contact-nav-item.active {
            background: white;
            border-left-color: #2c7a47;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 内容区域 */
        .contact-content {
            flex: 1;
            max-width: 800px;
        }

        /* 联系信息卡片 */
        .contact-card {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            margin: 1rem 0;
        }

        .contact-icon {
            width: 40px;
            height: 40px;
            background: #2c7a47;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
        }

        /* 办公地点 */
        .office-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .office-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        /* 联系表单 */
        .contact-form {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-top: 0.5rem;
        }

        .submit-btn {
            background: #2c7a47;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        @media (max-width: 768px) {
            .contact-container {
                flex-direction: column;
            }

            .contact-sidebar {
                width: 100%;
            }
        }
    </style>
{% endblock %}
{% block main %}
    <!-- 联系我们模块 -->
    <div class="contact-container">
        <!-- 左侧导航 -->
        <div class="contact-sidebar">
            <div class="contact-nav-item active" data-content="info">联系方式</div>
            <div class="contact-nav-item" data-content="offices">办公地点</div>
            <div class="contact-nav-item" data-content="form">在线留言</div>
            <div class="contact-nav-item" data-content="hours">服务时间</div>
        </div>

        <!-- 右侧内容区 -->
        <div class="contact-content" id="contact-content">
            <!-- 内容通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // 模拟数据
        const contactData = {
            info: {
                title: "联系方式",
                content: `
                    <div class="contact-card">
                        <div class="contact-item">
                            <div class="contact-icon">📞</div>
                            <div>
                                <h3>客服电话</h3>
                                <p>400-123-4567</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📧</div>
                            <div>
                                <h3>电子邮箱</h3>
                                <p>contact@agricom.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📍</div>
                            <div>
                                <h3>总部地址</h3>
                                <p>北京市海淀区农业科技大厦18层</p>
                            </div>
                        </div>
                    </div>
                `
            },
            offices: {
                title: "分支机构",
                content: `
                    <div class="office-grid">
                        <div class="office-card">
                            <h3>北京总部</h3>
                            <p>地址：海淀区科技路18号</p>
                            <p>电话：010-87654321</p>
                        </div>
                        <div class="office-card">
                            <h3>上海分部</h3>
                            <p>地址：浦东新区农业大厦B座</p>
                            <p>电话：021-12345678</p>
                        </div>
                        <div class="office-card">
                            <h3>广州分部</h3>
                            <p>地址：天河区创新园12栋</p>
                            <p>电话：020-11223344</p>
                        </div>
                    </div>
                `
            },
            form: {
                title: "在线留言",
                content: `
                    <form class="contact-form">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" class="form-input" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input type="email" class="form-input" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <label>留言内容</label>
                            <textarea class="form-input" rows="5" placeholder="请输入留言内容"></textarea>
                        </div>
                        <button type="submit" class="submit-btn">提交留言</button>
                    </form>
                `
            },
            hours: {
                title: "服务时间",
                content: `
                    <div class="contact-card">
                        <h3>客户服务时间</h3>
                        <p>工作日：09:00 - 18:00</p>
                        <p>周末：10:00 - 17:00</p>
                        <h3 style="margin-top:1.5rem">节假日安排</h3>
                        <p>春节假期：2月10日-17日暂停服务</p>
                        <p>国庆假期：10月1日-3日暂停服务</p>
                    </div>
                `
            }
        };

        // 渲染内容函数
        function renderContactContent(section) {
            const container = document.getElementById('contact-content');
            const data = contactData[section];

            container.innerHTML = `
                <h2>${data.title}</h2>
                ${data.content}
            `;
        }

        // 侧边栏点击事件
        document.querySelectorAll('.contact-nav-item').forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有active类
                document.querySelectorAll('.contact-nav-item').forEach(c =>
                    c.classList.remove('active'));

                // 添加active类到当前点击项
                item.classList.add('active');

                // 获取分类并渲染内容
                const section = item.dataset.content;
                renderContactContent(section);
            });
        });

        // 初始渲染
        renderContactContent('info');
    </script>
{% endblock %}